<%--
  Created by IntelliJ IDEA.
  User: FHJ
  Date: 2022/11/30
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>民宿-首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"/>

    <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">


</head>
<body>
<form>
    <ul class="layui-nav"  lay-bar="disabled">

        <li class="layui-nav-item other"><img src="${pageContext.request.contextPath}/img/logo.png"> </li>
        <li class="layui-nav-item layui-this other"><a href="">首页</a></li>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/customer">订酒店</a></li>

        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/customer">旅游攻略</a></li>
        <li class="layui-nav-item">
            <div>

                <a href=""><span class="layui-icon layui-icon-search" style="font-size: 30px; color: #1E9FFF;"></span></a>
                <input type="text">

            </div>
        </li>
        <li class="layui-nav-item login"><a href="${pageContext.request.contextPath}/customer">登录</a></li>
        <li class="layui-nav-item login"><a class="last" href="${pageContext.request.contextPath}/customer">注册</a></li>
    </ul>
</form>





<!-- banner横幅 -->
<div class="banner">
    <div class="layui-carousel" id="test10">
        <div carousel-item="">
            <div><img src="${pageContext.request.contextPath}/img/main1.jfif"></div>
            <div><img src="${pageContext.request.contextPath}/img/main2.jfif"></div>
            <div><img src="${pageContext.request.contextPath}/img/main3.jfif"></div>
            <div><img src="${pageContext.request.contextPath}/img/main4.jfif"></div>
        </div>
    </div>
</div>
<!-- wrapper -->
<div class="wrapper">
    <div class="main">
        <h1 class="title1">酒店业务服务升级</h1>

        <div class="picture">
            <ul>
                <li><img src="${pageContext.request.contextPath}/img/p1.png"/>
                    <p>确认后变更，最高赔付首晚房费的3倍</p>
                </li>
                <li><img src="${pageContext.request.contextPath}/img/p2.png"/>
                    <p>到店无房最高赔付首晚房费的3倍</p>
                </li>
                <li><img src="${pageContext.request.contextPath}/img/p3.png"/>
                    <p>退改服务保障与承诺</p>
                </li>
            </ul>
        </div>
        <h2 class="title2">酒店推荐</h2>
        <div class="hotel">
            <ul>
                <c:forEach var="product" items="${productList}" begin="0" end="3">
                <li>
                    <a href="${pageContext.request.contextPath}/customer">
                        <img src="${pageContext.request.contextPath}/${product.proImg}">
                        <p>${product.proName}</p>
                        <span>￥${product.proPrice}</span>
                    </a>
                </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>








<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '100%'
            ,height: '450px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });

    // 这里开始是开头导航栏
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });

</script>



</body>
</html>
